<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>教师表</title>
  <style>
        .el-table .warning-row {
            background: oldlace;
        }
        .el-table .success-row {
            background: #f0f9eb;
        }
        .el-table .danger-row {
            background: #f0f7f8;
        }
        .el-header{
            text-align: center;
            font-size: 35px;
            font-weight: 500;
        }
    </style>
</head>
<body>
<div id="app">
  <el-header>
    <span>学生课程成绩查询(教师端)</span>
  </el-header>
  <el-form :inline="true" :model="searchform" class="demo-form-inline">
    <el-form-item>
      <el-select v-model="searchform.schoolYear" clearable placeholder="学年">
        <el-option
                v-for="item in schoolyears"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-input v-model="searchform.studentId" placeholder="学生学号"></el-input>
    </el-form-item>
    <el-form-item>
      <el-input v-model="searchform.studentName" placeholder="学生姓名"></el-input>
    </el-form-item>

    <!-- 搜索按钮 -->
    <el-form-item>
      <el-button type="primary" @click="searchSudentCondition"> <i class="el-icon-search"></i></el-button>
    </el-form-item>
    <!-- 添加学生信息按钮 -->
    <el-button icon="el-icon-plus" circle style="margin-left:250px" @click="addStudentGradeDialogVisible = true"></el-button>
    <!-- 一键删除按钮 -->
    <el-button type="danger" plain @click="multidel">一键删除</el-button>
  </el-form>

  <!-- 添加学生信息对话框 -->
  <el-dialog
          title="添加学生成绩"
          :visible.sync="addStudentGradeDialogVisible"
          width="30%"
          center>

    <el-form  label-width="80px" :model="addStudentGradeForm" :rules="rules" ref="addStudentGradeForm" class="demo-addStudentGradeForm">

      <el-form-item label="学年" prop="schoolYear">
        <el-select v-model="addStudentGradeForm.schoolYear" placeholder="请选择学年">
          <el-option
                  v-for="item in schoolyears"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="学生学号" prop="studentId">
        <el-input v-model.number="addStudentGradeForm.studentId" ></el-input>
      </el-form-item>

      <el-divider><i class="el-icon-document-add"></i></el-divider>

      <el-form-item label="语文">
        <el-input v-model.number="addStudentGradeForm.chinese"></el-input>
      </el-form-item>

      <el-form-item label="数学">
        <el-input v-model.number="addStudentGradeForm.math"></el-input>
      </el-form-item>

      <el-form-item label="英语">
        <el-input v-model.number="addStudentGradeForm.english"></el-input>
      </el-form-item>


    </el-form>
    <span slot="footer" class="dialog-footer">
          <el-button @click="addStudentGradeDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addStudentGrade('addStudentGradeForm')">添 加</el-button>
        </span>
  </el-dialog>
  <!-- 修改成绩对话框 -->
  <el-dialog
          title="修改学生成绩"
          :visible.sync="updateStudentGradeDialogVisible"
          width="30%"
          center>

    <el-form  label-width="80px" :model="updateStudentGradeForm">

      <el-form-item label="学年">
        <el-select v-model="updateStudentGradeForm.schoolYear" disabled placeholder="请选择学年">
          <el-option
                  v-for="item in schoolyears"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="学生学号">
        <el-input v-model="updateStudentGradeForm.studentId" :disabled="true"></el-input>
      </el-form-item>

      <el-divider><i class="el-icon-edit"></i></el-divider>

      <el-form-item label="语文">
        <el-input v-model.number="updateStudentGradeForm.chinese"></el-input>
      </el-form-item>

      <el-form-item label="数学">
        <el-input v-model.number="updateStudentGradeForm.math"></el-input>
      </el-form-item>

      <el-form-item label="英语">
        <el-input v-model.number="updateStudentGradeForm.english"></el-input>
      </el-form-item>

    </el-form>

    <span slot="footer" class="dialog-footer">
          <el-button @click="updateStudentGradeDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateStudentInfo">修 改</el-button>
        </span>
  </el-dialog>
  <!-- 表格 -->
  <el-table
          :data="StudentTableData"
          style="width: 100%"
          :default-sort = "{prop: 'studentId', order: 'ascending'}"
          @selection-change="handleSelectionChange"
  >
    <el-table-column
            type="selection"
            width="50">
    </el-table-column>

    <el-table-column
            prop="moreinfo"
            label="信息"
            align="center"
            width="80px">
      <template slot-scope="scope">
        <el-link type="info" @click="lookinfo(scope.row)">查看</el-link>
      </template>
    </el-table-column>

    <el-table-column
            prop="schoolYear"
            label="学年"
            align="center"
            width="150px">
    </el-table-column>

    <el-table-column
            prop="studentId"
            label="学号"
            sortable
            align="center"
            width="120px">
    </el-table-column>

    <el-table-column
            prop="studentName"
            label="姓名"
            align="center"
            width="120px">
      <template slot-scope="scope">
        <el-tag effect="plain">{{ scope.row.studentName }}</el-tag>
      </template>
    </el-table-column>

    <el-table-column
            prop="chinese"
            label="语文"
            align="center"
            width="120px">
    </el-table-column>

    <el-table-column
            prop="math"
            label="数学"
            align="center"
            width="120px">
    </el-table-column>

    <el-table-column
            prop="english"
            label="英语"
            align="center"
            width="120px"
    >
    </el-table-column>

    <el-table-column
            prop="totalScore"
            label="总分"
            sortable
            align="center"
            width="120px">
    </el-table-column>

    <el-table-column
            label="操作"
            align="center"
            width="180px">
      <template slot-scope="scope">
        <el-button-group>
          <el-button
                  type="success"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.row)"></el-button>
          <el-button
                  type="danger"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"></el-button>
        </el-button-group>
      </template>
    </el-table-column>

  </el-table>
  <div class="block">
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20, 25]"
            :page-size="pageSize"
            style="margin-top:20px"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
  </div>

</div>
</div>

<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#app",
        data() {
            var checkStudentId = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('学号不能为空'));
                }
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                    } else {
                        if ((""+value).length != 5) {
                            callback(new Error('学号必须是五位数字'));
                        } else {
                            axios({
                              method:'get',
                              url:"http://localhost:8080/accounts/check/studentId?id="+value,
                              headers:{
                                  'Content-Type':"application/json;charset=UTF-8",
                                  'Authorization':localStorage.getItem('token')
                              }
                          }).then(result=>{
                                if(result.data.code==0){
                                    callback(result.data.msg);
                                }else if(result.data.code==1){
                                    callback();
                                }
                            })
                        }
                    }
                }, 1000);
            };
            return {
                //分页默认值
                currentPage: 1,
                pageSize:10,
                total:0,
                StudentTableData:[],
                multipleSelection: [],
                // 搜索表单返回值
                searchform: {
                    schoolYear: '',
                    studentId:'',
                    studentName:''
                },
                // 添加表单返回值
                addStudentGradeForm:{
                    schoolYear:'',
                    studentId:'',
                    chinese:'',
                    math:'',
                    english:''
                },
                updateStudentGradeForm:{
                    schoolYear:'',
                    studentId:'',
                    chinese:'',
                    math:'',
                    english:''
                },
                //修改英雄对话框返回值
                updateStudentGradeDialogVisible: false,
                //添加英雄对话框返回值
                addStudentGradeDialogVisible: false,
                schoolyears: [{
                    value: '2019-2020',
                    label: '2019-2020'
                },{
                    value: '2020-2021',
                    label: '2020-2021'
                }, {
                    value: '2021-2022',
                    label: '2021-2022'
                }, {
                    value: '2022-2023',
                    label: '2022-2023'
                }, {
                    value: '2023-2024',
                    label: '2023-2024'
                }],

                courses:[{
                    value: '语文',
                    label: '语文'
                },{
                    value: '数学',
                    label: '数学'
                }, {
                    value: '英语',
                    label: '英语'
                }],
                rules: {
                    schoolYear: [
                        { required: true, message: '请选择学年', trigger: 'blur' },
                    ],
                    studentId: [
                       { required: true, validator: checkStudentId, trigger: 'blur'}
                    ],
                    subjectName: [
                        { required: true, message: '课程名称不能为空', trigger: 'blur' }
                    ]
                }
            }
        },
        mounted(){
            this.tableInit();
        },
        methods: {
            tableInit(){
                axios({
                    method:'get',
                    url:"http://localhost:8080/teacher?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
                    headers:{
                        'Authorization':localStorage.getItem('token')
                    }
                }).then(result=>{
                    console.log(result.data);
                        if(result.data.code==1){
                          this.StudentTableData=result.data.data.rows;
                          this.total=result.data.data.totalCount;
                        }else if(result.data.code==0 && result.data.msg=='未登录！'){
                          window.parent.location.href="../pages/Login.html";
                        }else if(result.data.code==0){
                          this.$message.error=result.data.msg;
                        }
                    })
            },
            //点击一键删除按钮执行
            multidel(){
                this.$confirm('确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                axios({
                    headers:{
                        "Content-Type":"application/json",
                        'Authorization':localStorage.getItem('token')
                    },
                        method:"delete",
                        url:"http://localhost:8080/teacher/deletebyIds",
                        data:this.multipleSelection
                    })
                    .then(result=>{
                    if(result.data.code==1){
                        this.tableInit();
                        this.$message({
                          type: 'success',
                          message: '删除成功!'
                        });
                        this.tableInit();
                    }else if(result.data.code==0){
                           this.$message.error(result.data.msg);
                     }
                    })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
                    this.multipleSelection=[];
                    this.tableInit();
                });
            },
            //处理多选框
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //处理分页
            handleSizeChange(val) {
                this.pageSize=val;
                this.tableInit();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.tableInit();
            },
            //提交搜索表单
            searchSudentCondition() {
                axios({
                    method:'post',
                    url:"http://localhost:8080/teacher/selectByCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
                    data:this.searchform,
                    headers:{
                        'Content-Type':"application/json;charset=UTF-8",
                        'Authorization':localStorage.getItem('token')
                    }
                }).then(res=>{
                    if(res.data.code==1){
                        this.totalCount=res.data.data.totalCount;
                        this.StudentTableData=res.data.data.rows;
                    }else if(result.data.code==0){
                           this.$message.error(result.data.msg);
                     }
                })
            },
            addStudentGrade(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios({
                          method:'post',
                          url:"http://localhost:8080/teacher/addstudentgrade",
                          data:this.addStudentGradeForm,
                          headers:{
                              'Content-Type':"application/json;charset=UTF-8",
                              'Authorization':localStorage.getItem('token')
                          }
                        }).then(result=>{
                            if(result.data.code==1){
                                this.addStudentGradeDialogVisible=false;
                                this.$message({
                                      message: '添加成功',
                                      type: 'success'
                                    });
                                this.tableInit();
                                //清空添加英雄表单
                                this.addStudentGradeForm={
                                    schoolYear:'',
                                    studentId:'',
                                    subjectName:'',
                                    courseMark:'',
                                    markCommit:''
                                }
                            }else if(result.data.code==0){
                                this.$message.error(result.data.msg);
                              }
                            })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //回显数据
            handleEdit(row){
                this.updateStudentGradeDialogVisible=true;
                this.updateStudentGradeForm={
                    schoolYear:row.schoolYear,
                    studentId:row.studentId,
                    chinese:row.chinese,
                    math:row.math,
                    english:row.english
                }
            },
            //修改英雄信息
            updateStudentInfo(){
<!--                console.log(this.updateStudentGradeForm);-->
                    axios({
                          method:'put',
                          url:"http://localhost:8080/teacher/updateStudentGrades",
                          data:this.updateStudentGradeForm,
                          headers:{
                              'Content-Type':"application/json;charset=UTF-8",
                              'Authorization':localStorage.getItem('token'),
                          }
                        }).then(result=>{
                        if(result.data.code==1){
                            this.$message({
                                    message: '修改成功',
                                    type: 'success'
                            });
                            //关闭对话框更新表格
                            this.updateStudentGradeDialogVisible=false;
                            this.tableInit();
                        }else if(result.data.code==0){
                          this.$message.error(result.data.msg);
                        }
                    });
            },
            //删除英雄
            handleDelete(row){
                this.$confirm('确认删除该学生此学年的所有成绩信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                          method:'delete',
                          url:"http://localhost:8080/teacher/deleteStudentGrade?schoolyear="+row.schoolYear+"&studentId="+row.studentId,
                          headers:{
                              'Content-Type':"application/json;charset=UTF-8",
                              'Authorization':localStorage.getItem('token')
                          }
                    }).then(result=>{
                      if(result.data.code==1){
                              this.tableInit();
                              this.$message({
                                  type: 'success',
                                  message: '删除成功!'
                              });
                      }else if(result.data.code==0){
                                this.$message.error(result.data.msg);
                         }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    })
</script>
</body>
</html>